<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        /**
         *  1.数据的变更函数
         *  push、pop、shift、unshift，splice，sort，reverse, concat
         *  2.直接替换数组
         *  this.listArray = ['bye','world']
         *  this.listArray = ['bye'].concat(['world'])
         *  3.直接更新数组的内容
         *  this.listArray[1] = 'hello'
         *  4.直接添加对象的内容，也可以自动的展示出来
         *   this.listObject.age=100
         *
         */
        listArray: ['dell','lee','teacher'],
        listObj: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {},
    template: `
          <div>
            <div v-for="(item,index) in listObj" :key="index">{{index}}--{{item}}</div>
          </div>
          <div>
            <div v-for="item in 10">{{item}}</div>
          </div>
          <hr>
          <template v-for="(value,key,index) in listObj">
            <div v-if="key !== 'lastName'">
              {{value}} -- {{key}}
            </div>
          </template>
        `
  });
  const vm = app.mount("#app");
</script>
</body>
</html>